<template>
    <div>
        <!--
                <button @click="isShow=!isShow">show or hide</button>
                &lt;!&ndash;隐藏==删除元素&ndash;&gt;
                <div v-if="isShow">
                    {{msg}}
                </div>
                &lt;!&ndash;隐藏==display=none&ndash;&gt;
                <div v-show="isShow">
                    {{msg}}
        </div>
-->
        <!--
                <button @click="isShow=!isShow">switch</button>
                <div v-if="isShow">
                    111<br>
                </div>
                <div v-else>
                    222<br>
                </div>
        -->
        <button @click="card=1">1</button>
        <button @click="card=2">2</button>
        <button @click="card=3">3</button>
        <button @click="card=4">4</button>
        <div v-if="card==1">
            111<br>
        </div>
        <div v-else-if="card==2">
            222<br>
        </div>
        <div v-else-if="card==3">
            333<br>
        </div>
        <div v-else>
            444<br>
        </div>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                msg: "this is test",
                isShow: true,
                card: 1,
            }
        },
        methods: {}
    }
</script>

<style scoped>

</style>